<!--
*@momofukuPays 百福支付
*@author lijiaqi
*@date 2023/10/17 14:19
-->
<template>
  <div class="pageBox">
    <!--    头部-->
    <x-header :left-options="{backText: ''}">百福支付</x-header>
    <!--    内容部分-->
    <div class="content_box">
      <!--   模块   -->
      <div class="one_item" v-for="(item,index) in dataList" :key="index">
        <div class="box_title">
          <p>{{ item.title }}</p>
        </div>
        <div class="item_box">
          <!--小模块-->
          <div class="item_box_one" v-for="(i,index) in item.payList" :key="index">
            <div class="one_box">
              <div class="itemLine_box">
                <div class="line_left">
                  <div class="pay_imgbox">
                    <img v-if="i.icon" :src="i.icon" alt=""/>
                  </div>
                  <div class="left_textbox">
                    <p>{{ i.name }}</p>
                    <p v-if="i.desc">{{ i.desc }}</p>
                  </div>
                </div>

                <div class="line_right">
                  <p v-if="i.rightDesc">{{ i.rightDesc }}</p>
                  <div class="line_right_imgbox">
                    <x-icon v-if="i.rightType==='rightArrow'" style="fill: #a6a3a3" type="ios-arrow-right" size="20"></x-icon>
                    <check-icon v-if="i.rightType==='checkBox'" :value.sync="i.demo1"></check-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--    按钮    -->
      <div class="button_box">
        <div class="box_left">
          <p>支付金额（元）</p>
          <p>{{count}}</p>
        </div>
        <div class="but_item" @click="showPopup()">
          <p>立即支付</p>
        </div>
      </div>

      <!--密码输入弹框-->
      <div class="passwordBox">
        <van-popup v-model="passshow"
                   :closeable="false"
                   close-icon-position="top-left"
                   position="bottom"
                   :style="{ height: '350px' }">
          <div class="popup">
            <!--            <p>余额支付</p>-->
            <div class="popup_title">
              <div class="popup_title_">请输入支付密码</div>
            </div>
            <!-- 密码输入框 -->
            <van-password-input :value="password" :focused="showKeyboard"/>
          </div>
        </van-popup>

        <div class="popup_">
          <!--      密码键盘-->
          <van-number-keyboard
            :show="passshow"
            :maxlength="6"
            @blur="passshow = false"
            @input="onInput"
            @delete="onDelete"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {CheckIcon} from 'vux'
import {NumberKeyboard, PasswordInput, Toast} from 'vant';

Vue.use(NumberKeyboard);
Vue.use(PasswordInput);
Vue.use(Toast);
export default {
  name: "momofukuPays",
  props: {},
  components: {CheckIcon},
  data() {
    return {
      dataList: [],
      icon: require('../../assets/bell.png'),
      demo1: false,
      passshow: false,     //密码弹窗
      showKeyboard: false,    //数字键盘显示隐藏
      password: "",      //支付密码
      count: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.count = this.$route.query.count || ''
    this.dataList = [
      {
        title: '行内账户支付',
        payList: [
          {
            key: '',
            icon: this.icon,
            name: '江西农商银行（尾号8736）',
            desc: '',
            rightDesc: '',
            demo1: false,
            rightType: 'checkBox'
          }, {
            key: '',
            icon: this.icon,
            name: '电子账户',
            desc: '余额：3,000.00元',
            rightDesc: '',
            demo1: true,
            rightType: 'checkBox'
          }, {
            key: '',
            icon: '',
            name: '全部付款方式',
            rightDesc: '其他银行卡、绑定新卡',
            rightType: 'rightArrow'
          }
        ]
      },
      {
        title: '直接支付',
        payList: [
          {
            key: '',
            icon: this.icon,
            name: '卡密支付（无需绑卡）',
            desc: '',
            rightDesc: '',
            rightType: 'rightArrow'
          }, {
            key: '',
            icon: this.icon,
            name: '银联支付',
            desc: '',
            rightDesc: '',
            rightType: 'rightArrow'
          }, {
            key: '',
            icon: this.icon,
            name: 'Apple Pay',
            rightDesc: '',
            rightType: 'rightArrow'
          }
        ]
      },
      {
        title: '权益抵扣',
        payList: [
          {
            key: '',
            icon: this.icon,
            name: '优惠券',
            desc: '',
            rightDesc: '暂无优惠券',
            rightType: ''
          }, {
            key: '',
            icon: this.icon,
            name: '积分',
            desc: '当前积分0',
            rightDesc: '不可用',
            rightType: ''
          }
        ]
      }
    ]
  },
  mounted() {
  },
  methods: {
    //余额支付 弹出
    showPopup() {
      this.passshow = true;
      this.password = ''
    },
    //密码输入函数
    onInput(key) {
      this.password = (this.password + key).slice(0, 6);
      if (this.password.length == 6) {
        //确定密码
        this.passshow = false;
        Toast('支付成功！')
        this.$router.push("/refinance/payBackResult?count=" + this.count);
        console.log("确定支付" + this.password)
      }
    },
    onDelete() {
      this.password = this.password.slice(0, this.password.length - 1);
    },
  }
}
</script>

<style lang="less" scoped>
.pageBox {
  min-height: 100vh;
  //中间内容部分
  .content_box {
    width: 100%;

    //模块
    .one_item {

      .box_title {
        text-align: left;
        color: #a6a3a3;
        padding: 3px 10px;
      }
    }

    .item_box {
      margin-bottom: 8px;
      height: 100%;
      //width: 100%;
      background-color: #FFFFFF;

      .item_box_one {
        border-bottom: 1px solid #E5E6EB;
      }

      .item_box_one:last-child {
        border-bottom: 0;
      }

      .one_box {
        padding: 10px;

        .itemLine_box {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .line_left {
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .pay_imgbox {
              width: 24px;
              height: 24px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .left_textbox {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: center;
              margin-left: 10px;
            }
          }

          .line_right {
            display: flex;
            align-items: center;
            justify-content: center;

            p {
              color: #a6a3a3;
            }

            .line_right_imgbox {
              width: 20px;
              height: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }

      .one_box:active {
        background-color: #E5E6EB;
      }
    }

    //按钮部分
    .button_box {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #FFFFFF;
      padding: 7px 10px;
      height: 40px;

      .box_left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        p:last-child {
          color: #ff4a32;
          font-size: 16px;
          font-weight: 500;
        }
      }

      .but_item {
        padding: 5px 15px;
        //width: 90%;
        //margin: 0 auto;
        background-color: #ff4a32;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        p {
          color: white;
          font-size: 16px;
        }
      }
    }
  }

  /*密码输入框*/

  .passwordBox {
    .popup {
      width: 100%;
      height: 100%;
      border-radius: 7px;
      //height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333
    }

    .popup_title {
      height: 49px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #666
    }

    .popup_ {
      position: fixed;
      bottom: 0;
      z-index: 99999
    }
  }

  /deep/ .weui-cell {
    margin: 0;
    padding: 10px 0;
  }

  /deep/ .weui-cells:last-child:after {
    border-bottom: 0;
  }

  /deep/ .weui-cell:before {
    border: 0;
  }

  /deep/ .weui-label {
    font-size: 16px;
    font-weight: 500;
  }
}
</style>
